<template>
    <div class="kk-document-view">
        <el-splitter>
            <el-splitter-panel :size="300" :min="200" max="50%">
                <div class="demo-panel">
                    <el-tree :allow-drop="allowDrop" :allow-drag="allowDrag" :data="tree_data"
                        :props="{ label: 'name' }" highlight-current draggable :default-expand-all="true"
                        :expand-on-click-node="false" node-key="id" @node-drag-start="handleDragStart"
                        @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave"
                        @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop"
                        @node-click="handleNodeClick">
                        <template #default="{ node, data }">
                            <div class="custom-tree-node" @dblclick="dbClickNode(node, data)">
                                <template v-if="data.id == -1">
                                    <span>{{ data.name }}</span>
                                    <div class="custom-tree-node-op">
                                        <KuiIcon name="Plus" style="padding-left: 2px;padding-right: 5px;"
                                            @click="appendNode(node, data)" />
                                    </div>
                                </template>
                                <template v-else>
                                    <!-- 双击编辑 -->
                                    <el-input size="small" v-if="edit_node.id === data.id" v-model="data.name"
                                        :ref="(el) => setInputItemRef(data.id, el)" placeholder="" autofocus
                                        @blur="($event) => handleInputBlur(data)"
                                        @keyup.enter.native="() => handleInputEnter(data)"></el-input>
                                    <template v-else>
                                        <span>{{ data.name }}</span>
                                        <div class="custom-tree-node-op">
                                            <el-dropdown placement="bottom-start" trigger="click"
                                                @command="(command) => handleMoreActionCommand(command, node, data)">
                                                <KuiIcon name="More" style="padding-left: 2px;padding-right: 5px;" />
                                                <template #dropdown>
                                                    <el-dropdown-menu>
                                                        <el-dropdown-item command="delete"
                                                            icon="Remove">删除</el-dropdown-item>
                                                        <el-dropdown-item command="rename"
                                                            icon="Edit">重命名</el-dropdown-item>
                                                        <!-- <el-dropdown-item command="moveUp"
                                                        icon="ArrowUp">上移</el-dropdown-item>
                                                    <el-dropdown-item command="moveDown"
                                                        icon="ArrowDown">下移</el-dropdown-item> -->
                                                    </el-dropdown-menu>
                                                </template>
                                            </el-dropdown>
                                            <KuiIcon name="Plus" style="padding-left: 2px;padding-right: 5px;"
                                                @click="appendNode(node, data)" />
                                        </div>
                                    </template>
                                </template>

                            </div>
                        </template>
                    </el-tree>
                </div>
            </el-splitter-panel>
            <el-splitter-panel :min="200">
                <div class="demo-panel">
                    <DocTable :dirId="currentData.id"></DocTable>
                </div>
            </el-splitter-panel>
        </el-splitter>
    </div>
</template>
<script setup lang="js">
import { onMounted, ref } from 'vue'
import kbdocument from '@/api/kbdocument'
import DocTable from './DocTable.vue'

const tree_data = ref([{ name: '全部', id: -1, children: [] }])

const edit_node = ref({})

const currentData = ref({ id: -1 })

let inputItemRefs = ref({})
const setInputItemRef = (id, el) => {
    if (el) {
        inputItemRefs.value[id] = el;
    }
}

const handleDragStart = (node, ev) => {
    console.log('drag start', node)
}
const handleDragEnter = (draggingNode, dropNode, ev) => {
    console.log('tree drag enter:', dropNode.label)
}
const handleDragLeave = (draggingNode, dropNode, ev) => {
    console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode, dropNode, ev) => {
    console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (draggingNode, dropNode, dropType, ev) => {
    console.log('tree drag end:', dropNode && dropNode.label, dropType)
}
const handleDrop = (draggingNode, dropNode, dropType, ev) => {
    console.log('tree drop:', dropNode.label, dropType)
    const data = {
        id: draggingNode.data.id,
        refId: dropNode.data.id,
        dropType: dropType
    }
    kbdocument.dragMoveDir(data).then((res) => {
        console.log(res)
    })
}

const handleNodeClick = (data) => {
    currentData.value = data
}
const allowDrop = (draggingNode, dropNode, type) => {
    if (dropNode.data.label === 'Level two 3-1') {
        return type !== 'inner'
    } else {
        return true
    }
}
const allowDrag = (draggingNode) => {
    if (draggingNode.data.id === edit_node.value.id) {
        return false
    }
    return true
}

const fetchTree = () => {
    kbdocument.getDirTree().then((res) => {
        tree_data.value[0].children = res.data
        if (res.data.length > 0) {
            currentData.value = res.data[0]
        } else {
            currentData.value = { id: -1 }
        }
    })
}
const appendNode = (parentNode, parentData) => {
    let data = {
        id: null,
        name: '新建目录',
        children: [],
        parentId: parentData.id
    }
    kbdocument.createDir(data).then((res) => {
        data.id = res.data.id
        if (parentData.children) {
            parentData.children.push(data)
        } else {
            parentData.children = [data]
        }
    })
}

const dbClickNode = (node, data) => {
    edit_node.value = data;
    setTimeout(() => {
        inputItemRefs.value[data.id].focus()
    }, 100)
}

const handleInputBlur = (data) => {
    kbdocument.updateDir(data).then((res) => {
        console.log(res)
        edit_node.value = {};
    })
}
const handleInputEnter = (data) => {
    edit_node.value = {};
    handleInputBlur(data)
}

const handleMoreActionCommand = (command, node, data) => {
    console.log(command)
    if (command === 'delete') {
        kbdocument.deleteDir(data.id).then((res) => {
            let parent = node.parent
            let children = parent.data.children || parent.data
            let index = children.findIndex((d) => d.id === data.id)
            children.splice(index, 1)
        })
    } else if (command === 'rename') {
        dbClickNode(node, data)
    } else if (command === 'moveUp') {
        let parent = node.parent
        let children = parent.data.children || parent.data
        let index = children.findIndex((d) => d.id === data.id)
        if (index > 0) {
            let temp = children[index - 1]
            children[index - 1] = children[index]
            children[index] = temp
        }
    } else if (command === 'moveDown') {
        let parent = node.parent
        let children = parent.data.children || parent.data
        let index = children.findIndex((d) => d.id === data.id)
        if (index < children.length - 1) {
            let temp = children[index + 1]
            children[index + 1] = children[index]
            children[index] = temp
        }
    }
}

onMounted(() => {
    fetchTree()
})
</script>
<style lang="scss" scoped>
.kk-document-view {
    height: 100%;

    .demo-panel {
        height: 100%;
    }

    .custom-tree-node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-right: 10px;

        .custom-tree-node-op {
            display: none;
        }

        &:hover {
            .custom-tree-node-op {
                display: block;
            }
        }
    }
}
</style>